<script setup>
import NoteCard from './NoteCard.vue';
import Button from './Button.vue';
import { portrait } from '../utils/data';

import { dataOne } from '../utils/function';
import { ref, computed,onMounted } from 'vue';
import { useUserIdStore } from '../stores/user';
import { findCommentPageApi,insertCommentApi } from '../api/index.js';
onMounted(() => {
    getCommentList(); // 页面加载时获取评论列表数据
    console.log(mergedData.value);
})
const props = defineProps({
    card: {
        default: {},
    },
    photo: {
        default: [],
    },
    id: {
        default: 0,
    }
})

// 合并card和photo为一个二维数组
const mergedData = computed(() => {
    return [
        props.card,  // 留言数据
        props.photo  // 照片数据
    ];
});

// 根据id获取对应数据
const currentData = computed(() => {
    console.log('card',mergedData.value[props.id]);
    return mergedData.value[props.id];
});

//获取评论列表数据
const commentList = ref([]);
const nowPage = ref(1);
const pageSize = ref(8);
 const getCommentList = () => {
  if(nowPage.value > 0){
    let data = {
        id: currentData.value.id,
        page: nowPage.value,
        pagesize: pageSize.value,
    }
    findCommentPageApi(data).then((res) => {
         // 将返回的数据赋值给 commentList 数组
       commentList.value = commentList.value.concat(res.message) 
       // 加载更多数据时，将 nowPage 加 1
       if(res.message.length === pageSize.value){
        nowPage.value++;
       }else{
        nowPage.value = 0;
       }
    })
  }
 }


const discuss = ref('');//评论框的内容
const name = ref('匿名');//评论框的名字

const ispointer = computed(() => {
    if (discuss.value && name.value) {
        return false;
    } else {
        return true;
    }
})
const userIdStore = useUserIdStore();
const user = computed(() => {
    return userIdStore.user;
});

const submitComment = () => {
    if (!ispointer.value) {
        let img = Math.floor(Math.random() * 14)
        let data = {
            wallId: currentData.value.id,
            userId: user.value,
            name: name.value,
            comment: discuss.value,
            imgurl: img,
            moment: new Date(),
        }
        console.log(data);
        insertCommentApi(data).then((res) => {
            console.log(currentData.value);
            // 评论成功后，更新评论列表数据
            commentList.value.unshift(data); // 将新评论添加到评论列表的开头
            currentData.value.comcount[0].count++; // 更新卡片的评论数
            discuss.value = ''; // 清空评论框内容
            name.value = '匿名'; // 清空评论框名字
        })
    }
}

</script>

<template>
    <div class="card-detail">
        <div class="top-bt">
            <p class="revoke">联系墙主撕下该便签</p>
            <p class="report">举报</p>
        </div>
        <NoteCard :notes="currentData"></NoteCard>
        <div class="form">
            <textarea class="form-message" placeholder="请输入评论..." v-model="discuss"></textarea>
            <div class="form-bt">
                <input type="text" placeholder="请输入昵称..." class="form-name" v-model="name" />
                <Button size="max" nom="primary" :class="{ notpointer: ispointer }" @click="submitComment">提交评论</Button>
            </div>
        </div>
        <p class="title">评论{{ currentData.comcount[0].count }}</p>
        <div class="comment">
            <div class="comment-li" v-for="(item, index) in commentList" :key="index">
                <div class="user-head" :style="{ backgroundImage: portrait[item.imgurl] }">
                </div>
                <div class="comment-message">
                    <div class="comment-top">
                        <p class="comment-name">{{ item.name }}</p>
                        <p class="comment-time">{{ dataOne(item.moment) }}</p>
                    </div>
                    <div class="comment-main">
                        {{ item.comment }}
                    </div>
                </div>
            </div>
            <p 
            class="more" 
            @click="getCommentList" 
            v-show="nowPage !==0"
            >加载更多</p>
        </div>
    </div>
</template>

<style lang="less" scoped>
.card-detail {
    position: relative;
    padding: 0 @padding-20;


    .top-bt {
        position: fixed;
        top: 0;
        left: 0;
        padding: @padding-20;
        display: flex;

        .revoke {
            color: #409EFF;
            cursor: pointer;
            padding-right: 30px;
        }

        .report {
            color: #F67770;
            cursor: pointer;
        }
    }

    .form {
        .form-message {
            font-size: 16px;
            border: 1px solid rgba(148, 148, 148, 1);
            width: 100%;
            height: 56px;
            background: none;
            padding: @padding-8;
            box-sizing: border-box;
            resize: none; // 禁止用户调整元素的大小;
            margin-top: @padding-12;
        }

        .form-bt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: @padding-12;

            .form-name {
                width: 200px;
                box-sizing: border-box;
                background: none;
                padding: @padding-8;
                border: 1px solid rgba(148, 148, 148, 1);
                line-height: 20px;
            }

            .notpointer {
                pointer-events: none; // 禁止点击事件;
                cursor: not-allowed; // 禁止可点击效果;
            }
        }
    }

    .title {
        font-weight: 600;
        padding-top: 30px;
        padding-bottom: @padding-20;
    }
   .more {
      color: @gray-2;
      text-align: center;
      padding-top: 20px ;
      cursor: pointer;
    }
    .comment-li {
        display: flex;
        padding-bottom: 30px;

        .user-head {
            flex: none; //当一个子元素设置了 flex: none;，它不会随着父容器的剩余空间进行伸缩，而是保持其原始大小
            width: 28px;
            height: 28px;
            border-radius: 28px;
            overflow: hidden; // 超出部分隐藏;
            // background-image: linear-gradient(180deg, #FFA9D9 0%, #E83D3D 100%);
        }

        .comment-message {
            padding-left: @padding-8;

            .comment-top {
                display: flex;
                align-items: center;

                .comment-name {
                    font-weight: 600;
                }

                .comment-time {
                    font-size: @font-size-12;
                    padding-left: @padding-4 ;
                    color: @gray-3;
                }
            }

            .comment-main {
                font-size: @font-size-14;
                padding-top: @padding-4;
            }
        }
    }
}
</style>
